<script setup>
import { ref } from 'vue';
const list = ref([
  { id: 1, name: '吃饭' },
  { id: 2, name: '睡觉' },
  { id: 3, name: '写代码' }
])
const del = id => list.value = list.value.filter(item => item.id != id)

const addValue = ref('')
const addItem = () => {
  if (!addValue.value) {
    alert('输入内容不能为空')
    return
  }
  let id = 0
  if (list.value.length) {
    id = list.value[list.value.length - 1].id + 1
  }
  list.value.push({ id, name: addValue.value })
  addValue.value = ""
}
</script>

<template>
  <div>
    <div>
      <input type="text" v-model="addValue"> <button @click="addItem">添加</button>
    </div>

    <table border="">
      <thead>
        <th>标识</th>
        <th>待办事项</th>
        <th>操作</th>
      </thead>
      <tbody>
        <tr v-for="item in list" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>
            <a @click="del(item.id)">删除</a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>